<template>
  <el-card>
    <template #header>
      <div>useDebounce&useThrottle</div>
    </template>
    <el-input type="text" placeholder="input" v-model="valueRef" />
    <p>DebouncedValue：{{ debouncedValue }}</p>
    <el-input type="text" placeholder="input" v-model="valueRef2" />
    <p>throttledValue{{ throttledValue }}</p>
  </el-card>
</template>

<script setup>
  import { ref } from "vue";

  import { useDebounce, useThrottle } from "vue-hooks-plus";
  const valueRef = ref("");
  const valueRef2 = ref("");

  const debouncedValue = useDebounce(valueRef, { wait: 500 });
  const throttledValue = useThrottle(valueRef2, { wait: 500 });
</script>
